<template>
  <div class="empty-data">
    <div :class="['inner',size?'inner-'+size:'']">
      <span class="inner-icon"></span>
      <div>暂无数据</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "emptyData",
  data() {
    return {};
  },
  props: {
    size: String,
    emptyText:{
      default:'暂无数据',
      type:String
    }
  }
};
</script>
<style lang="scss" scoped>
.empty-data {
  height: 100%;
  position: relative;
  .inner {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 140px;
    font-size: 16px;
    color: #666;
    &-small {
      width: 100px;
      font-size: 14px;
    }
    &-mini {
      width: 60px;
      font-size: 12px;
    }
    transform: translate(-50%, -50%);
    &-icon {
      display: inline-block;
      padding: 45% 0;
      width: 100%;
      background: url("../../assets/empty-icon.png") no-repeat center;
      background-size: contain;
    }
  }
}
</style>

